<template>
    <div class="quill-editor-wrap">
        <QuillEditor v-model:content="option.content" content-type="html" theme="snow" />
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from "vue"
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';
export default defineComponent({
    props: {
        option: Object,
    },
    components: {
        QuillEditor
    },
    setup() {
        const content = ref('<h1>This is html header</h1>')
        const options = reactive({
            modules: {
                toolbar: {
                }
            },
            placeholder: '请输入内容...'
        })
        const setValue = () => {
            console.log(content.value.ops[0].insert)
        }
        return {
            options,
            content,
            setValue
        }
    }
})
</script>

<style lang="scss" scoped>
.quill-editor-wrap {
    width: 100%;
    height: 200px;

    .ql-container,
    .ql-editor {
        height: 250px;
    }
}
</style>
